import React, { Component, createRef, type ReactNode, type RefObject } from 'react'
import './FormPop.sass'
import type { Hobbys, State } from './FormPopType'

export default class FormPop extends Component {
  constructor (props: Readonly<unknown>) {
    super(props)
  }

  // #region 变量
  // state 状态
  public state: Readonly<State> = {
    isShow: false,
    username: '',
    password: '',
    city: '',
    hobby: [],
    marry: [],
    users: []
  }
  private hobbys: Hobbys = [
    { name: '唱歌', enName: 'sing' },
    { name: '跳舞', enName: 'dance' },
    { name: 'Rap', enName: 'rap' },
    { name: '打篮球', enName: 'palyingBasketball' }
  ]
  private citys: Hobbys = [
    { name: '请选择', enName: '' },
    { name: '北京', enName: 'beijing' },
    { name: '上海', enName: 'shanghai' },
    { name: '天津', enName: 'tianjin' },
    { name: '海南', enName: 'hainan' }
  ]
  private formRef: RefObject<HTMLFormElement | null> = createRef()
  // #endregion

  // #region 事件处理
  // 点击事件
  private onClickMask (e: React.MouseEvent) {
    // console.log(this.formPopRef?.current?.classList)
    if ((e.target as HTMLElement).classList.contains('form_pop')) {
      // 关闭弹窗
      this.setState({
        isShow: false
      })
    }
  }
  // 表单元素的change事件
  private onChange (e: React.ChangeEvent) {
    // console.log(e)
    const key = (e.target as typeof e.target & { name: string }).name as keyof State
    const value = (e.target as typeof e.target & { value: string }).value
    // console.log(key, value)
    // 不是checkbox
    if ((e.target  as typeof e.target & { type: string }).type !== 'checkbox') {
      // console.log(111)
      // 直接改变对应属性值
      this.setState({
        [key]: value
      })
    } else {
      // 是checkbox需要判断有还是没有这个
      // console.log(111)
      if (!Array.isArray(this.state[key])) return
      if (this.state[key].includes(value)) {
        // console.log(111)
        // 删除
        this.setState({
            [key]: this.state[key].filter(v => v !== value)
          })
      } else {
        // 添加
        // console.log(222)
        this.setState({
          [key]: [...this.state[key], value]
        })
      }
    }
  }
  // 表单的提交事件
  private onSubmit (e: React.FormEvent) {
    e.preventDefault()
    console.log(this.state)
    // 将表单数据存储起来
    // 重置表单
    console.log(this.formRef)
    // this.formRef.current?.reset()
    this.setState({
      users: [...this.state.users, {
        username: this.state.username,
        password: this.state.password,
        city: this.state.city,
        hobby: this.state.hobby,
        marry: this.state.marry.includes('married')
      }],
      username: '',
      password: '',
      city: '',
      hobby: [],
      marry: []
    }, () => console.log(this.state.users))
  }
  // #endregion

  // #region 函数

  // #endregion

  // 渲染
  public render(): ReactNode {
    return (
      <>
        {
          this.state.isShow && (
            <div className="form_pop" onClick={ (e) => this.onClickMask(e) }>
              <form ref={ this.formRef } onSubmit={ (e) => this.onSubmit(e) }>
                <div className="form_item title">新增用户</div>
                <div className="form_item">
                  <label htmlFor="username">用户名：</label>
                  <input type="text" autoComplete='autocomplete' value={ this.state.username } id='username' name='username' onChange={ (e) => this.onChange(e) } />
                </div>
                <div className="form_item">
                  <label htmlFor="password">密码：</label>
                  <input type="password" autoComplete='autocomplete' value={ this.state.password } id='password' name='password' onChange={ (e) => this.onChange(e) } />
                </div>
                <div className="form_item">
                  <span>兴趣：</span>
                  {
                    this.hobbys.map((item, index) => (
                      <React.Fragment key={ index }>
                        <input
                          type="checkbox"
                          id={ item.enName }
                          onChange={ (e) => this.onChange(e) }
                          value={ item.enName }
                          name='hobby'
                          checked={ this.state.hobby.includes(item.enName) }
                        />
                        <label style={{ margin: '0 10px 0 5px' }} htmlFor={ item.enName }>{ item.name }</label>
                      </React.Fragment>
                    ))
                  }
                </div>
                <div className="form_item">
                  <span>婚姻状况：</span>
                  <input type="checkbox" value='married' checked={ this.state.marry.includes('married') } id='marry' name='marry' onChange={ (e) => this.onChange(e) } />
                  <label htmlFor="marry">{ this.state.marry.includes('married') ? '已婚' : '未婚'}</label>
                </div>
                <div className="form_item">
                  <label htmlFor="city">城市：</label>
                  <select name="city" id="city" onChange={ (e) => this.onChange(e) } value={ this.state.city }>
                    {
                      this.citys.map((item, index) => (
                        <option key={ index } value={ item.enName }>{ item.name }</option>
                      ))
                    }
                  </select>
                </div>
                <div className='form_item btn'>
                  <button type='submit'>确认</button>
                  <button type='button' onClick={ () => this.setState({ isShow: false }) }>取消</button>
                </div>
              </form>
            </div>
          )
        }
        <button onClick={ () => this.setState({ isShow: true }) }>新增用户</button>
      </>
    )
  }
}
